<template>
	<view class="exchange_wrapper">
		<Tabs :sendData="tabConfig" @changeTabs="changeTabs" />
		<view class="card_wrap">
			<view class="title">输入{{tabConfig.index > 0 ? '邀请' : '兑换'}}码</view>
			<input type="text" v-model="exchangeCode" placeholder="例: H7xWBrYt" />
			<button class="btn" @click="immedExchange">立即兑换</button>
		</view>
	</view>
</template>

<script>
	import { api_getExchangeCode,api_getInvitationCode } from '@/api/api'
	import * as type from '../../utils/device'
	import Tabs from '@/components/custom_tabs/index.vue'
	export default {	
		components: { Tabs },
		data() {
			return {
				tabConfig: {
					index: 0,
					activeColor: '#333',
					activeBorderColor: '#f00',
					list: ['兑换码','邀请码'],
				},
				exchangeCode: '',
			}
		},
		computed: {
			device(){
				return type.default;
			}
		},
		onLoad(options) {
			this.init(options);
		},
		methods: {
			init(opt){	// 初始化
				this.tabConfig.index = opt.subIndex;
			},
			changeTabs(i){	// 面包屑导航接收值
				const pages = getCurrentPages();
				const currentRoute = this.device == 'MP-WEIXIN' ? '/'+pages[pages.length - 1].route : pages[pages.length - 1].$route.path;
				uni.redirectTo({ url: `${currentRoute}?subIndex=${i}` });		
			},
			immedExchange(){	// 立即兑换
				let name = this.tabConfig.index > 0 ? '邀请码' : '兑换码';
				if (!this.exchangeCode) {
					uni.showToast({ title: `${name}为空`,icon: 'error'	});
					return;
				}
				if (this.tabConfig.index > 0) {
					api_getInvitationCode({yqm: this.exchangeCode}).then(res => {
						uni.showToast({title: res.msg,icon: res.code == 1 ? 'success' : 'error'})
					}).catch(err => console.log(err))
				} else {
					api_getExchangeCode({dhm: this.exchangeCode}).then(res => {
						uni.showToast({title: res.msg,icon: res.code == 1 ? 'success' : 'error'})
					}).catch(err => console.log(err))
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
.exchange_wrapper{
	.card_wrap{
		width: 80%;
		height: 150px;
		border-radius: 10px;
		margin: 20px auto 0;
		-webkit-box-shadow: 0 0 8px 3px rgba(0,0,0,.15);
		box-shadow: 0 0 8px 3px rgba(0,0,0,.15);
		padding: 15px 20px;
		box-sizing: border-box;
		.title{
			font-size: 16px;
			font-weight: bold;
			text-align: center;
			margin: 0 0 10px 0;
		}
		input{
			padding: 10px 0;
			font-size: 13px;
			border-bottom: 1px solid #ebedf0;
		}
		.btn{
			display: block;
			width: 100px;
			font-size: 13px;
			color: #323233;
			    opacity: .5;
			background-color: #f2f2f2;			
			padding: 5px 0;
			border-radius: 30px;
			outline: none;
			margin: 10px auto;
			&::after{
				border: none;
			}
		}
	}
}
</style>
